<p-card class="flex-1 flex"
  styleClass="flex flex-1 flex-column p-2">
  <ng-template pTemplate="header"></ng-template>

  <div class="flex flex-1 gap-2">
    <div class="flex-1">
      <p-card>
        <p-table [value]="items"
          [columns]="cols"
          selectionMode="single"
          [(selection)]="current"
          (selectionChange)="onSelectionChange($event)"
          dataKey="id">
          <ng-template pTemplate="header"
            let-columns>
            <tr>
              <th *ngFor="let col of columns">
                {{ col.header }}
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body"
            let-rowData
            let-columns="columns">
            <tr [pSelectableRow]="rowData">
              <td *ngFor="let col of columns">
                {{ rowData[col.field] }}
              </td>
            </tr>
          </ng-template>
        </p-table>

      </p-card>
    </div>
    <div class="flex-1">
      <p-toolbar>
        <div>
          <button pButton
            class="p-button-sm"
            (click)="onGenerateSchema()">GenerageSchema</button>
        </div>
      </p-toolbar>
      <pre>
{{current|json}}  
</pre>
    </div>
    <div class="flex-1 flex flex-column">
      <p-toolbar>
        <div>
          <button pButton
            class="p-button-sm"
            (click)="onGenerateFormGroup()">Generate FormGroup</button>
        </div>
      </p-toolbar>
      <ngx-monaco-editor [options]="editorOptions"
        class="flex-1"
        (ngModelChange)="onModelChange($event)"
        [(ngModel)]="schemaJson"></ngx-monaco-editor>
    </div>
    <div class="col-2">
      <div *ngIf="formGroup && schema">
        <app-form-group [group]="formGroup"
          [schema]="schema"></app-form-group>
        <div>
          {{formGroup.value|json}}
        </div>
        <button pButton (click)="onUpdateCurrentValue()">Update Current</button>
      </div>
    </div>
  </div>
</p-card>